<template>
  <div>
    <el-dialog
      title="任务填报内容"
      :visible.sync="dialogVisible"
      :modal="true"
      :appendToBody="true"
      width="90%"
      v-dialog-drag
      :close-on-click-modal="false"
      top="5vh"
      :destroy-on-close="true"
      @open="handleOpen"
      @close="handleClose"
    >
      <div class="dialog-content">
        <div>
          {{ operation.operateTime }}
          {{ operation.operatorName || operation.operator
          }}{{ operation.execResult }}
        </div>

        <el-divider></el-divider>

        <FillForm
          ref="FillForm"
          v-loading="loading"
          :formName="formName"
          :headerForm="headerForm"
          :formFieldConfig="templateConfig"
          :formData="formData"
          :renderingMode="renderingMode"
          :formWorkOrder="formWorkOrder"
          :disabled="true"
        ></FillForm>

        <el-divider v-if="!!participants.length"></el-divider>

        <el-row v-for="(row, i) in participants" :key="i">
          <el-col :span="3">
            参与人：{{ row.participantName || row.participant }}
          </el-col>
          <el-col :span="12">
            非生产小时数：
            {{ row.participationDuration }}
            小时
          </el-col>
        </el-row>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import FillForm from "../fillForm";
import {
  getTaskDetail,
  getTaskStepFormContent,
  getTaskTemplateByTaskId,
} from "@/api/taskMgmt/center";
export default {
  components: { FillForm },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: null,
    },
    // 某节点下
    item: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      operation: {
        operateTime: "",
        operator: "",
        operatorName: "",
        execResult: "",
      },
      taskDetail: null,
      stepDetail: null,
      templateConfig: null,
      formData: null,
      formWorkOrder: null,
      // 参与人
      participants: [],
      loading: false,
    };
  },
  computed: {
    dialogVisible: {
      set(val) {
        this.$emit("update:visible", val);
      },
      get() {
        return this.visible;
      },
    },
    formName() {
      return this.row?.taskName || "";
    },
    renderingMode() {
      return this.row?.renderingMode || "1";
    },
    headerForm() {
      const data = this.taskDetail;
      // 同时判断data和stepDetail都不为空才返回headerForm的内容值，目的时为了避免重复计算
      if (!data || !this.stepDetail) {
        return {
          ownedFactory: null,
          ownedFactoryName: null,
          ownedWorkshopId: null,
          ownedWorkshopName: null,
          ownedProductionLineId: null,
          ownedProductionLineName: null,
          groupId: null,
          groupName: null,
          className: null,
          executorName: null,
          auditorName: null,
          date: null,
          actualExecuteStartTime: null,
          actualExecuteEndTime: null,
        };
      }
      return {
        ownedFactory: data.ownedFactory,
        ownedFactoryName: data.ownedFactoryName,
        ownedWorkshopId: data.ownedWorkshopId,
        ownedWorkshopName: data.ownedWorkshopName,
        ownedProductionLineId: data.ownedProductionLineId,
        ownedProductionLineName: data.ownedProductionLineName,
        groupId: this.stepDetail.formContent?.groupId || "",
        groupName: this.stepDetail.formContent?.groupName || "",
        className: this.stepDetail.formContent?.className || "",
        executorName: this.getOperatorLabel(data),
        auditorName: data.auditorName,
        date: this.stepDetail.operateTime || "",
        actualExecuteStartTime: data.actualExecuteStartTime,
        actualExecuteEndTime: data.actualExecuteEndTime,
      };
    },
  },
  methods: {
    handleClose() {
      this.templateConfig = {};
      this.formData = null;
      this.formWorkOrder = null;
      this.participants = [];
    },
    handleOpen() {
      // 查询任务详情
      this.getTaskDetail();
      // 获取任务模板的单据设计 以及 表单填报内容
      this.getTemplateAndContent();
    },
    // 获取任务详情
    getTaskDetail() {
      if (!this.row?.id) {
        return;
      }
      getTaskDetail(this.row.id)
        .then((res) => {
          this.taskDetail = res?.data || null;
        })
        .catch(() => {
          this.taskDetail = null;
        });
    },
    // 获取模板及填报内容
    getTemplateAndContent() {
      if (!this.item?.id) {
        return;
      }
      this.loading = true;
      Promise.all([
        getTaskTemplateByTaskId(this.row.id),
        getTaskStepFormContent(this.item.id),
      ])
        .then(([res1, res2]) => {
          // 任务模板的单据设计
          if (res1?.data && res1?.data != "null") {
            this.templateConfig = JSON.parse(res1.data);
          } else {
            this.templateConfig = false;
          }

          // 填报内容
          const data = res2?.data || {};
          this.stepDetail = data;
          this.operation = {
            operateTime: data.operateTime,
            operator: data.operator,
            operatorName: data.operatorName,
            execResult: data.execResult,
          };

          if (data.formContent) {
            const formContent = JSON.parse(data.formContent);
            this.stepDetail.formContent = formContent;
            this.participants = formContent.taskParticipantList || [];
            this.formData = formContent.taskContentDtoList || [];
            this.formWorkOrder = {
              workOrderNo: formContent.workOrderNo,
              workOrderName: formContent.workOrderName,
            };
          }
        })
        .catch(() => {
          this.templateConfig = null;
          this.formData = null;
          this.formWorkOrder = null;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getOperatorLabel(form) {
      if (form.operatorType == "dept") {
        // 显示部门
        return form.executiveAgencyName || form.executiveAgency;
      }

      let operatorName = form.operatorName;

      // if (this.postManageDictObj.hasOwnProperty(form.operator)) {
      //   // 显示岗位
      //   operatorName = this.postManageDictObj[form.operator];
      // } else {
      //   // 显示工位
      //   operatorName = form.operatorName;
      // }

      return operatorName || "";
    },
  },
};
</script>
<style lang="scss" scoped>
.el-row {
  margin-top: 10px;
  font-size: 15px;
  display: flex;
  align-items: center;
}
::v-deep .el-dialog__body {
  padding-bottom: 0;
}
</style>
